<!-- #section:basics/content.breadcrumbs -->
<link rel="stylesheet" type="text/css"
      href="$request.contextPath/res/framework/datetimepicker/jquery.datetimepicker.css"/>

<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">管理后台</a>
        </li>
        <li class="active">图片管理</li>
    </ul>

</div>

<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
        <!-- /.page-header -->
    <div class="page-header">
        <div class="row" style="vertical-align: middle">
            <div class="col-xs-4">
                <a href="#modal-category" role="button" class="btn btn-sm btn-success"
                   onclick="$('#submitForm').clearForm();validator.resetForm();" href="#modal-category" data-toggle="modal">
                    <i class="ace-icon fa fa-pencil-square-o bigger-120 "></i>添加图片
                </a>
            </div>
        </div>
    </div>
        <div class="row">
            <div class="col-xs-12">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>图片</th>
                        <th>出现次数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="user_list"></tbody>
                </table>
            </div>
            <!-- /.span -->
        </div>
        <div id="biuuu_city" style="margin: 5px;text-align: center"></div>
    <!-- /.row -->
</div>
<!-- /.page-content -->
<div id="modal-category" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">×</span>
                    </button>
                    新增图片
                </div>
            </div>
            <form class="form-horizontal" method="post" role="form" id="submitForm" action="./zzl/img" enctype="multipart/form-data" novalidate="novalidate">
                <input type="hidden" name="imgId" id="imgId" value="0">
                <div class="modal-body no-padding">
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 图片 </label>
                        <div class="col-sm-8  col-xs-12 ">
                            <label class="ace-file-input ace-file-multiple">
                                <input type="file" name="file" id="file">
                            </label>
                            <span class="help-block">
                                    建议长宽度在1200像素以上,宽高4:1，仅支持jpg、png格式，文件小于2M
                                    </span>
                        </div>
                    </div>
                    <div class="space-4"></div>
                </div>

                <div class="modal-footer no-margin-top text-right">
                    <button class="btn btn-sm btn-success " type="submit">
                        <i class="ace-icon fa fa-check"></i>
                        提交
                    </button>
                    <!--&nbsp;&nbsp;-->
                    <!--<button class="btn btn-sm btn-default " data-dismiss="modal">-->
                    <!--<i class="ace-icon fa fa-times"></i>-->
                    <!--关闭-->
                    <!--</button>-->
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--<script type="text/javascript" src="$request.contextPath/res/assets/js/ace/elements.fileinput.js"></script>-->
<script src="$request.contextPath/res/framework/datetimepicker/jquery.datetimepicker.js"></script>
<script type="text/javascript">
    var submitLock = false;
    var validator;
    //    var productId = '$productId';

    var options = {
        beforeSerialize:function() {
            if($('#file').val() == '') {
                $('#file').remove();
            }
        },
        beforeSubmit: function () {
            if (submitLock) {
                return false;
            }
            info('正在保存，请稍等...');
            submitLock = true;
            return true;
        },
        success: function (data) {
            submitLock = false;
            if (data.resultCode == 0) {
                succ('操作成功');
                $('#modal-category').modal('toggle');

                delay(function () {
                    //$('#modal-category').modal('hide');
                    load('./imgs');
                }, 1000);
            } else {
                error(data.resultMsg);
            }
        },
        error: function (data) {
            submitLock = false;
            error('系统繁忙，请稍候重试');
        },
        dataType: 'json',
        type: 'POST',
        timeout: 50000
    };
    $(function () {
        validator = $("#submitForm").validate({
            errorElement: "em",
            errorPlacement: function (error, element) {
                element.after(error);
            },
            rules: {
                "file": {
                    required: true
                }
            },
            messages: {
                "file": {
                    required: '请选择图片'
                }
            },
            submitHandler: function (form) {
                if (submitLock) {
                    return;
                }
                $(form).ajaxSubmit(options);
            }
        });
    });

    $('#file').ace_file_input({
        style: 'well',
        btn_choose: '选择题库图',
        btn_change: null,
        no_icon: 'ace-icon fa fa-picture-o',
        thumbnail: 'large',
        droppable: true,
        allowExt: ['jpg', 'jpeg', 'png', 'gif'],
        allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
    });

    function showEditDialog(imgId, imgUrl) {
        validator.resetForm();
        $('#submitForm').clearForm();
        $('#submitForm').find('#imgId').val(imgId);
        if (imgId > 0) {
            $('#file').ace_file_input('show_file_list', [{type: 'image', name: imgUrl}]);
            $('#file').parent().find('img').css({width: '300px', height: '150px'}).show();
            $('#modal-category').modal('show');
        }
    }
        $(document).ready(function () {
            getPageData(1);
        });

        function doQuery() {
            getPageData(1);
        }

        function getPageData(curr) {
            var brands;
            $.ajax({
                url: "./zzl/imgs",
                type: "get",
                dataType: 'json',
                data: {
                    "pgNum": curr,
                    "pgSize": 10,
                },

                success: function (data) {
                    console.log(data)
                    brands = data.data["list"];
                    console.log(brands);
                    //调用分页
                    laypage({
                        cont: 'biuuu_city',
                        pages: data.data['pages'],
                        curr: curr, //当前页
                        jump: function (obj, first) { //触发分页后的回调
                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                getPageData(obj.curr);
                            }
                        }
                    })
                    var str = "";
                    for (var i in brands) {
                        var kys = brands[i];
                        str += "<tr>";
                        //str += "<td >" + kys['imgId'] + "</td>";
                        str += "<td>" + "<a href=\"javascript:void(0)\"  onclick=\"showEditDialog('" + kys['imgId'] + "','" + kys['imgUrl'] + "')\"</a>" + kys['imgId'] + "</td>";
                        str += "<td > <img src=\"" + kys['imgUrl'] + "\" width=\"120\" height=\"100\"></td>";
                        str += "<td >" + kys['count'] + "</td>";
                        str += "<td >"
                        str += "<a class=\"red\" href=\"javascrip:void(0)\" onclick=\"deleteImgs(" + kys['imgId'] + ")\""
                            + "title=\"删除\">"
                            + "<i class=\"ace-icon fa fa-trash-o bigger-130\"></i>"
                            + "</a>"
                            + "</div>";
                        str += "</td>";
                        str += "</tr>";
                    }
                    //console.log(str);
                    $("#user_list").html(str);
                },
                error: function (data) {
                    layer.msg('获取记录失败！', {icon: 5});
                }
            });
        }

        function deleteBanner(Id) {
            confirm('确认删除?', function () {
                $.ajax({
                    type: "GET",
                    url: './banner/del',
                    data: {bannerId: Id},
                    success: function (data) {
                        if (data.resultCode == 0) {
                            succ('删除成功！');
                            getPageData(1);
                        } else {
                            error(data.resultMsg);
                        }
                    },
                    dataType: 'JSON'
                });
            });
        }
</script>